<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div style="text-align:left;" >
       当前总成绩： <span style="color:#ff9900;font-size:20px">{{this.scoreSum}}</span>
    <div id="main" style="width: 100%;height: 400px;"></div>
    </div>
</template>
<script>
    import echarts from 'echarts'
    import {selectscore} from '@/api/modules/student_work'
    import {setCookie,getCookie} from '@/libs/cookie'

    export default {
        name: '',
        data() {
            return {
                charts: '',
                /*  opinion: ["1", "3", "3", "4", "5"],*/
                opinionData: [],
                name:[],
                scoreSum: null,
                student:{
                    courseId:'',
                    userId:''
                }
            }
        },
                //调用
        mounted() {
            let courseID = JSON.parse(getCookie("courseID") || '{}');
            this.student.courseId = courseID
            let user = JSON.parse(getCookie("user") || '{}');
            this.student.userId = user.id
            this.SelectScore()
           
        },
        methods: {
            SelectScore(filter){
                filter = {
                    ...filter,
                    ...this.student
                }
                selectscore(filter).then(res => {
                     this.opinionData = res.data.scoreList
                     this.name = res.data.parentNameLit
                     this.scoreSum = res.data.scoreSum
                     console.log(this.opinionData)
                     console.log(this.name)
                     console.log(this.scoreSum)
                     this.$nextTick(function () {
                        this.drawLine('main')
                    })
                })
            },
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['作业成绩']
                    },
                    grid: {
                        left: '15%',
                        right: '17%',
                        bottom: '3%',
                        containLabel: true
                    },

                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.name

                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                    },

                    series: [{
                        name: '作业成绩',
                        type: 'line',
                        stack: '总量',
                        data: this.opinionData
                    }]
                })
            }
        },

    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>